<template>
    <div id="chart">
        { message }
    </div>
</template>

<script>
    export default {
        data() {
            return {
                Data:[],
                DataWD:[],
                DataSD:[],
                dataSD:[],
                DataLight:[],
            }
        },
        mounted() {
            this.initDom()
        },
        methods: {
            initDom() {
                //基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('chart'),'dark',);
                const axios = require('axios');
                axios.get('http://47.113.217.47:9095/SmartAG/view/viewTodayHumidity', {
                    params: {
                        date1: '2021-11-10 00:00:00',
                        date2: '2021-11-15 00:00:00',
                    }
                }).then(result=>
                    {
                        console.log(result.data);
                        // for (let i = 0; i <= result.data.length; i++) {
                        /*for (let i = 0; i <= 9; i++) {
                            let wd = result.data[i].temperatureData;
                            let gq = result.data[i].lightData;
                            let sd = result.data[i].humidityData;
                            let data = result.data[i].date;
                            this.DataWD.push({wd
                            });
                            console.log(this.DataWD);
                            this.DataSD.push({sd
                            });
                            this.DataLight.push({gq
                            });
                            this.Data.push({data
                            });
                        }*/
                        //时间
                        const DateTime = (function () {
                            let res = [];
                            let len = 8;
                            for (let i = 0; i <= len; i++) {
                                console.log(result.data[1].id)
                                res.push(renderTime(result.data[i].date))
                               /* res.push(renderTime(result.data[i].date));*/
                               /* console.log(renderTime(result.data[i].date))*/
                            }
                            return res;
                        })();
                        console.log(DateTime[0])

                        function renderTime(date) {
                            var dateee = new Date(date).toJSON();
                            return new Date(+new Date(dateee) + 0 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
                        }

                        //初始数据，每次随机生成数据（湿度）
                        console.log(result.data[0].id)
                        const DataSD = (function () {
                            let res = [];
                           /* let len = 9;*/
                            /*while (len--) {
                                console.log(result.data[1].id)
                                res.push(result.data[len].humidity);
                                console.log(result.data[len].humidity)
                            }*/
                            for (let i = 0; i <= result.data.length-1; i++) {
                                console.log(result.data[1].id)
                                res.push(result.data[i].humidity);
                                console.log(result.data[i].humidity)
                            }
                            return res;
                        })();
                        console.log(this.dataSD[0])

                      /*  //温度
                        const DataWD = (function () {
                            let res = [];
                            let len = 10;
                            while (len--) {
                                res.push(result.data[len].temperatureData);
                            }
                            return res;
                        })();
                        console.log(DataWD)

                        //光度
                        const DataLight = (function () {
                            let res = [];
                            let len = 10;
                            while (len--) {
                                res.push(result.data[len].lightData);
                            }
                            return res;
                        })();
                        console.log(DataWD)*/



                        let option = {
                            /*标题*/
                            title: {
                                top:'5%',
                                right: 'center',
                                text: '湿度变化图',
                                textStyle:{
                                    color: '#00CBA7'
                                }
                            },

                            //图表大小、
                            grid:{
                                top:'20%',
                                left:100,
                                right:'15%',
                                button:'10%',
                            },

                            //提示框
                            tooltip: {
                                trigger: 'axis',
                                //坐标轴指示器配置项
                                axisPointer:{
                                    lineStyle: {
                                        color: '00FF00'
                                    }
                                }
                            },
                            //图例组件
                            legend:{
                                top:20,
                                icon: 'rect',
                                itemHeight:5,
                                itemWidth:14,
                                itemGap: 13,
                                data: ['温度','湿度'],
                                right: '4%',
                                textStyle: {
                                    fontSize: 12,
                                    color: '#F1F1F3'
                                }
                            },
                            //缩放区域
                            dataZoom: {
                                show: false,
                                start: 0,
                                end: 100
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    axisTick: {
                                        alignWithLabel: true
                                    },
                                    data: DateTime,
                                },
                            ],

                            yAxis: [
                              /*  {
                                    type: 'value',
                                    scale: true,
                                    name: '温度（/℃）',
                                    max: 40,
                                    min: 0,
                                    boundaryGap: [0.2, 0.2]
                                },*/
                                {
                                    type: 'value',
                                    scale: true,
                                    name: '湿度/（g/m3）',
                                    max: 200,
                                    min: 0,
                                    boundaryGap: [0.2, 0.2]
                                },
                            ],
                            series: [
                            /* {
                                name: '温度',
                                data: DataWD,
                                type: 'line',
                                barWidth:10,
                            },*/
                            {
                                name: '湿度',
                                type: 'line',
                                barWidth:10,
                                /*xAxisIndex:1,*/
                                /*yAxisIndex:1,//使用y轴右边的值*/
                                /* data: this.dataSD,*/
                                data:DataSD,
                            },/*{
                                name: '光强',
                                type: 'line',
                                barWidth:10,
                                yAxisIndex:1,
                                data: DataLight,
                            },*/
                            ]
                        };
                        // 绘制图表
                        myChart.setOption(option);
                    }
                );


            },
        },
    }
</script>

<style scoped>
    #chart{
        float: left;
        width: 1453px;
        /* width: 100%;*/
        height: 600px;
    }
</style>

